<template>
	<div v-if="showTabPanel" class="tab-panel">
		<div @click="tapMask" class="panel-bg"></div>
		<div class="panel-menu">
			<ul>
				<router-link tag="div" class="tab-item" to="/home">
					<span class="icon-shop"></span>
					<span>首页</span>
				</router-link>
				<router-link tag="div" class="tab-item" to="/found">
					<span class="icon-moon"></span>
					<span>发现</span>
				</router-link>
				<router-link tag="div" class="tab-item" to="">
					<span class="icon-discount"></span>
					<span>收藏</span>
				</router-link>
				<router-link tag="div" class="tab-item" to="">
					<span class="icon-search"></span>
					<span>历史</span>
				</router-link>
				<router-link tag="div" class="tab-item" to="">
					<span class="icon-list"></span>
					<span>分类</span>
				</router-link>
				<router-link tag="div" class="tab-item" to="">
					<span class="icon-rack"></span>
					<span>推荐</span>
				</router-link>
			</ul>
			<router-link tag="div" class="tab-mine" to="/mine">
				<span class="icon-account"></span>
				<span>我的</span>
			</router-link>
		</div>
	</div>
</template>
<script>
import {Mixin} from '../../utils/mixin.js'
export default {
	mixins: [Mixin],
	methods: {
		tapMask() {
			if(this.showTabPanel) {
				this.onMenu()
			}
		}
	},
	watch:{
	  '$route.path': function (newVal, oldVal) {
	    console.log('路由变化')
	  }
	},
	beforeDestroy() {
		this.setShowTabPanel(false)
	}
}
</script>
<style lang="scss">
@import '../../assets/style/color.scss';
@import '../../assets/style/mixin.scss';
.tab-panel {
	width: 100%;
	height: 100%;
	position: fixed;
  z-index: 149;
  top: 50px;
	.panel-bg {
    position: absolute;
    z-index: 150;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: $color-bg-mask-4;
	}
	.panel-menu{
		width: 100%;
		background-color: $color-bg;
		padding-bottom: 12px;
		border-bottom: 4px solid #ff9a6a;
		position: absolute;
    z-index: 151;
    ul{
    	display: flex;
    	flex-direction: row;
    	flex-wrap: wrap;
    	justify-content: center;
    	align-items: center;
    	li {
    		width: 33%;
    		text-align: center;
    	}
    	.tab-item {
			height: 50px;
			width: 33%;
			@include center;
			flex-direction: column;
			color: $color-text;
			font-size: $font-size-12;
			&.router-link-active {
				color: $color-text-9;
				font-size: $font-size-12;
				}
			}
    }
		.tab-mine {
			height: 40px;
			margin: 10px 50px 0 50px;
			border-radius: 8px;
			background-color: $color-bg-fa;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			color: $color-text-f;
			font-size: $font-size-16;
		}
	}
}
</style>